<template>
  <div class="body vertical center ">
    <!-- 充值列表选择 -->
    <div
      :class="`flex space_between item_list ${item.status === 0 ? 'wh_item' : ''} ${curDepositWay.payname === item.payname ? 'active' : ''}`"
      v-for="(item, index) in usdtRecharge" :key="index">
      <div v-if="item.status === 0" class="bank_wh">
        <ImgT class="close mr-4" src="/imgs/payment/wh_bank.webp" />
        <span>{{ t('addBank_page_bankPay_wh') }}</span>
      </div>
      <div class="flex align_center item_list_l">
        <div class="bank_icon">
          <ImgT :src="`/imgs/payment/icon/icon_${item.payname}.webp`" />
        </div>
        <div class="bank-txt">
          <div class="flex bank_name">
            <span class="bank_payName">{{ t(`api_${item.payname}`) }}</span>
            <a class="wh-icon" @click="onCloseSm(item)"></a>
          </div>
          <div class="bank_limit">
            <template v-if="['usdt'].includes(item.payname?.toLowerCase())">
              {{ verifyNumberComma(String(item.minrecharge * usdtObj.rate)) }} ~ {{
                verifyNumberComma(String(item.maxrecharge * usdtObj.rate)) }}
            </template>
            <template v-else>
              {{ verifyNumberComma(String(item.minrecharge)) }} ~ {{ verifyNumberComma(String(item.maxrecharge)) }}
            </template>
          </div>
        </div>
      </div>
      <div class="item_list_r">
        <a @click="chooseWay(item)"> {{ t('deposit_page_use') }} </a>
      </div>
    </div>

  </div>
</template>

<script setup lang='ts'>
import { useI18n } from "vue-i18n";
import { onMounted, onUnmounted, ref } from 'vue';
import { useRouter } from 'vue-router';
// import { Net } from '@/net/Net';
import H5Websocket from "@/net/Net1";
import { MessageEvent2 } from '@/net/MessageEvent2';
import { NetPacket } from '@/netBase/NetPacket';
import { NetMsgType } from '@/netBase/NetMsgType';
import { showToast } from '@nutui/nutui';
import { Local } from "@/utils/storage";
import { bankPayMethods, bankPayType, verifyNumberComma } from "@/utils/publicMethods";

const { t } = useI18n();
const router = useRouter();
const usdtRecharge = ref<any>(); // 充值银行列表
const legalRecharge = ref<any>([]);
const curDepositWay = ref({ payname: '' }); // 当前选择的充值方式

const baseMtdList = { label: t('addBank_page_pChoose'), value: -1, minrecharge: 0, maxrecharge: 0, paymethod: '' }
// 充值方式列表
const mtdList = ref<any>([{ ...baseMtdList }]);
const baseDcList = { label: t('deposit_page_notOffer'), value: 0 }
// 优惠列表
const dcList = ref<any>([{ ...baseDcList }]);
const discountList = ref<any>([]);

const chooseBank = ref({ label: '', value: '' }); // 选择的银行卡
const usdtObj = ref({
  rate: 26540, // usdt 汇率,
});

// 重置
const resetData = () => {
  curDepositWay.value = { payname: '' }
  mtdList.value = [{ ...baseMtdList }]
  dcList.value = [{ ...baseDcList }]
  chooseBank.value = { label: '', value: '' }
}
// 获取充值信息
const getShopInfo = () => {
  const req = NetPacket.req_get_shop_info();
  // Net.instance.sendRequest(req);
  H5Websocket.sendMessageHandler(req);
}
const handleShopInfoRes = (rs: any) => {
  resetData();
  usdtObj.value.rate = rs.usdt_viet_rate;
  // 匹配出银行的支付方式
  const newArr = [...rs.rechargelist_by_paymenttype].filter((item: any) => bankPayMethods.includes(item.paymenttype));
  // 为了赋值 payname 字段
  newArr.forEach((item: any) => {
    bankPayType.forEach((item_1: any) => {
      if (item.paymenttype === item_1.paymenttype) {
        item.payname = item_1.payname
      }
    })
  })
  console.log('-----', newArr)
  const bankNewObj: any = newArr.find((item: any) => item.payname === 'bankcard');
  const bankAll: any = [];
  if (bankNewObj.paymethod) {
    bankNewObj.paymethod.split(',').map((item: any, index: any) => {
      bankAll.push({
        maxrecharge: bankNewObj.maxrecharge,
        minrecharge: bankNewObj.minrecharge,
        paymenttype: 100 + index, // 银行转账 100,  网银直连 101， 扫码支付 102
        paymethod: item, // 没有用到
        payname: `bankcard_${index}`,
        status: bankNewObj.status,
      })
    })
  }
  // 非银行的支付方式
  const notBankArr = newArr.filter((item: any) => item.payname !== 'bankcard').map((item: any) => { return { ...item, paymenttype: item.paymenttype * 100 } });
  usdtRecharge.value = bankAll.concat(notBankArr);
  // 需要过滤 limit 为 0 的数据
  discountList.value = rs.discount_list.filter((item: any) => item.limit)
  discountList.value.forEach((dc: any) => dcList.value.push({ label: dc.name, value: dc.discount_ID }));
  console.log('-------', usdtRecharge.value)
  usdtRecharge.value.map((item: any) => {
    legalRecharge.value.push(item);
    mtdList.value.push(
      {
        minrecharge: item.minrecharge,
        maxrecharge: item.maxrecharge,
        paymethod: item.paymethod,
        payname: item.payname,
        label: t(`api_${item.payname}`),
        value: item.paymenttype,
        status: item.status,
      }
    );
  })
  Local.set('depositWayObj', { legalRecharge: legalRecharge.value, mtdList: mtdList.value })
  // emit('haveBankList', usdtRecharge.value.length > 0)
  // console.log('======', usdtRecharge.value)
};

const onCloseSm = (data: any) => {
  Local.set('curExplainWay', data);
  router.push(`/deposit/explain`);
}
// 去充值
const goToDeposit = () => {
  if (!curDepositWay.value.payname) {
    return showToast.fail(t('method_error'));
  }
  router.push(`/depositNext`);
}
// 选择充值方式
const chooseWay = (data: any) => {
  Local.set('curDepositWay', data);
  // form.value.method = data.paymenttype
  curDepositWay.value = data;
  goToDeposit();
}

onMounted(() => {
  setTimeout(() => {
    getShopInfo();
  }, 600)
  // 获取银行信息
  MessageEvent2.addMsgEvent(NetMsgType.msgType.msg_notify_req_get_shop_info, handleShopInfoRes);
})
onUnmounted(() => {
  MessageEvent2.removeMsgEvent(NetMsgType.msgType.msg_notify_req_get_shop_info, null);
})

</script>

<style lang='scss' scoped>
.body {
  height: 100vw;
  padding: 10px;
  color: #fff;

  .item_list {
    position: relative;
    display: flex;
    justify-content: space-between;
    border-radius: 10px;
    width: 355px;
    height: 60px;
    padding: 10px;
    background: url(/imgs/payment/listBg.webp) center no-repeat;
    background-size: 100%;

    &.active {
      background-image: url(/imgs/payment/listBg_active.webp);
    }

    &.wh_item {
      pointer-events: none;
    }

    .bank_wh {
      display: flex;
      align-items: center;
      justify-content: center;
      position: absolute;
      background: rgba(0, 0, 0, .7);
      width: 100%;
      height: 100%;
      border-radius: 8px;
      top: -3px;
      left: -3px;

      img {
        width: 24px;
      }
    }

    .item_list_l {
      display: flex;
      align-items: center;

      .bank_icon {
        margin-right: 10px;

        img {
          width: 36px;
          height: 36px;
        }
      }

      .bank-txt {
        .bank_name {
          display: flex;
          color: #93b4ff;

          .bank_payName {
            max-width: 160px;
            min-width: 60px;
          }

          .wh-icon {
            margin-left: 5px;
            width: 16px;
            height: 16px;
            background: url(/imgs/payment/wh.webp) center no-repeat;
            background-size: 100%;
          }
        }

        .bank_limit {
          font-size: 12px;
          color: #ffdc82;
        }
      }
    }

    .item_list_r {
      a {
        display: inline-block;
        text-align: center;
        width: 90px;
        height: 32px;
        line-height: 32px;
        background: url('/imgs/payment/go-btn.webp') center no-repeat;
        background-size: 100%;
      }
    }

  }
}
</style>